Can't pass params or props to nested navigator · Issue #11287 · react |
您所在的位置：网站首页 › react native navigator › Can't pass params or props to nested navigator · Issue #11287 · react |
|
Current behavior
Hello. I'm working with an app wich have nested navigators. The "parent" one is the stack navigator and inside the stack navigator I have one drawer navigator In this way, in my drawer navigator I just want to render the routes wich my user have auth to access. But what is happening is that I only can read those params and props in the outside parent navigator (stack). When I pass it to the child component (drawer) the param get undefined. const RootNavigation = ({ userToken }) => { return ( {userToken ? ( ) : ( )} ); };THE PARENT STACK (WORKING) : const StackRoutes = ({ user }) => { const { t, i18n } = useTranslation(); //Routes to logged users console.log('stack routes: ', user.recentDataAuth) //IN THIS CONSOLE LOG EVERYTHING WORKS FINE return ( ({ title: route.params.name })} /> ({ title: route.params.name })} /> ({ title: route.params.name })} /> ); };THE CHILD: (NOT WORKING) const DrawerRoutes = (params) => { const { t, i18n } = useTranslation(); //drawer routes console.log(params) //on those console logs everything is undefined. return ( } initialRouteName={t('fields')} screenOptions={{ headerStyle: { backgroundColor: Colors.primary, }, drawerStyle: { backgroundColor: Colors.drawerGrey, }, drawerLabelStyle: { marginLeft: -20, fontSize: 15, }, headerTintColor: Colors.white, drawerInactiveTintColor: Colors.white, drawerActiveBackgroundColor: Colors.primary, drawerActiveTintColor: Colors.white, }}> ( ), }} /> ( ), }} /> ( ), }} /> ( ), }} /> ( ), }} /> ); };The console log in the drawer routes returns the follow: {"navigation": {"addListener": [Function addListener], "canGoBack": [Function canGoBack], "dispatch": [Function dispatch], "getParent": [Function getParent], "getState": [Function anonymous], "goBack": [Function anonymous], "isFocused": [Function isFocused], "navigate": [Function anonymous], "pop": [Function anonymous], "popToTop": [Function anonymous], "push": [Function anonymous], "removeListener": [Function removeListener], "replace": [Function anonymous], "reset": [Function anonymous], "setOptions": [Function setOptions], "setParams": [Function anonymous]}, "route": {"key": "DrawerRoutes-KT5qBQgTU1sQi636R_UvU", "name": "DrawerRoutes", "params": undefined}} I tried to change the "params" name to test, I tried to modify the destructuring... anything seems work. Expected behaviorI expect to use the params on the child component, but it always render as undefined. Reproduction(https://snack.expo.dev/7b109M8Ar) Platform Android iOS Web Windows MacOS Packages @react-navigation/bottom-tabs @react-navigation/drawer @react-navigation/material-top-tabs @react-navigation/stack @react-navigation/native-stack react-native-tab-view Environment [YEP] I've removed the packages that I don't use package version @react-navigation/native ^6.08 @react-navigation/drawer ^6.3.0 @react-navigation/native-stack ^6.4.0 react-native-safe-area-context ^3.3.2 react-native-screens ^3.10.2 react-native-gesture-handler ^2.1.1 react-native-reanimated ^2.3.1 react-native 0.67.2 node 16.18.1 npm or yarn 8.19.2 and 1.22.19 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |